<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>22001010608滕旋州</title>
<link rel="stylesheet" href="./tengxuanzhou.css">
<link rel="stylesheet" href="./setting.css">
<style>
    body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 0;
        background: #fff;
        color: #333;
        font-size: 14px;
    }
    
    
</style>
</head>
<body>

<div class="txztop-bar">
    <a href="#">手机版虎扑</a> | <a href="#">虎扑客户端</a> | <a href="#">关注虎扑</a>
</div>

<div class="txzmain-nav txzclearfix">
    <a href="#" class="logo">虎扑</a>
    <ul>
        <li><a href="#">虎扑首页</a></li>
        <li><a href="#">NBA</a></li>
        <li><a href="#">CBA</a></li>
        <li><a href="#">中国足球</a></li>
        <li><a href="#">国际足球</a></li>
        <li><a href="#">装备</a></li>
        <li><a href="#">识货</a></li>
        <li><a href="#">社区</a></li>
        <li><a href="#">步行街</a></li>
        <li><a href="#">路人王</a></li>
        <li><a href="#">更多</a></li>
    </ul>
</div>

<div class="container">
    <h1>设置</h1>
    <ul class="tabs">
        <li><a href="#" class="active">基本资料</a></li>
        <li><a href="#">兴趣爱好</a></li>
        <li><a href="#">动态隐私</a></li>
        <li><a href="#">空间模板</a></li>
    </ul>

    <div class="form-container">
        <form id="settingsForm" action="/your-submit-url" method="post">
            <div class="form-group txzavatar">
                <label>头像：</label>
                <img src="./img/屏幕截图 2024-12-10 144314.png" alt="头像">
                <a href="#">重新</a>
            </div>
            <div class="form-group">
                <label>虎扑账号：</label>
                <span>修改密码, 邮箱, 绑定第三方网站账号 - 您还没有填写邮箱，<a href="#">请点击此处填写邮箱</a></span>
            </div>
            <div class="form-group">
                <label>性别：</label>
                <select name="gender">
                    <option value="保密">保密</option>
                    <option value="男">男</option>
                    <option value="女">女</option>
                </select>
            </div>
            <div class="form-group">
                <label>所在地：</label>
                <select name="province" id="provinceSelect">
                    <option value="保密">保密</option>
                    <option value="北京">北京</option>
                    <option value="上海">上海</option>
                    <option value="广东">广东</option>
                </select>
                <select name="city" id="citySelect">
                    <option value="保密">保密</option>
                </select>
            </div>

            <!-- 以下主队选择将通过JSON动态填充 -->
            <div class="form-group">
                <label>NBA主队：</label>
                <select name="nba_team" id="nba_team">
                    <option value="">暂不选择</option>
                </select>
            </div>
            <div class="form-group">
                <label>CBA主队：</label>
                <select name="cba_team" id="cba_team">
                    <option value="">暂不选择</option>
                </select>
            </div>
            <div class="form-group">
                <label>中超主队：</label>
                <select name="csl_team" id="csl_team">
                    <option value="">暂不选择</option>
                </select>
            </div>
            <div class="form-group">
                <label>英超主队：</label>
                <select name="epl_team" id="epl_team">
                    <option value="">暂不选择</option>
                </select>
            </div>
            <div class="form-group">
                <label>西甲主队：</label>
                <select name="laliga_team" id="laliga_team">
                    <option value="">暂不选择</option>
                </select>
            </div>
            <div class="form-group">
                <label>意甲主队：</label>
                <select name="seriea_team" id="seriea_team">
                    <option value="">暂不选择</option>
                </select>
            </div>
            <div class="form-group">
                <label>德甲主队：</label>
                <select name="bundesliga_team" id="bundesliga_team">
                    <option value="">暂不选择</option>
                </select>
            </div>
            <div class="form-group">
                <label>法甲主队：</label>
                <select name="ligue1_team" id="ligue1_team">
                    <option value="">暂不选择</option>
                </select>
            </div>
            <div class="form-group">
                <label>NFL主队：</label>
                <select name="nfl_team" id="nfl_team">
                    <option value="">暂不选择</option>
                </select>
            </div>

            <div class="txzsave-btn">
                <input type="submit" value="保存设置">
            </div>
        </form>
    </div>
</div>

<footer>
    Copyright by 虎扑JRs & 虎扑 -
    <a href="#">手机版虎扑</a> -
    <a href="#">虎扑App</a> -
    服务协议 - 网站地图 - NBA - CBA - 足球 - 中超
    <br>本网站服务于上海黑瓣体育科技有限公司，致力于体育视频等娱乐的文化产业发展。
    <br>成立于2004年，前身为虎扑体育网。2009年虎扑体育网成为为中国球迷所熟知的体育网站。从世界体育网页成立至今，除了体育赛事，其管辖区不断扩大的北美某些已经在篮球圈引发数度巨石运动，装备鉴定及发展迅速已经独立出本成为购物app。
</footer>

<script>
// JSON数据示例：各联赛对应球队列表
var leaguesData = {
    "nba_team": ["湖人", "勇士", "凯尔特人", "篮网", "公牛"],
    "cba_team": ["广东宏远", "北京首钢", "辽宁队", "浙江稠州", "山东高速"],
    "csl_team": ["广州队", "上海海港", "北京国安", "山东泰山"],
    "epl_team": ["曼联", "利物浦", "切尔西", "曼城", "阿森纳"],
    "laliga_team": ["皇马", "巴萨", "马德里竞技", "塞维利亚"],
    "seriea_team": ["尤文图斯", "AC米兰", "国际米兰", "那不勒斯"],
    "bundesliga_team": ["拜仁慕尼黑", "多特蒙德", "莱比锡", "勒沃库森"],
    "ligue1_team": ["巴黎圣日耳曼", "里昂", "马赛", "里尔"],
    "nfl_team": ["新英格兰爱国者", "达拉斯牛仔", "旧金山49人", "绿湾包装工"]
};

// 将JSON数据填入对应的下拉列表
function populateTeams() {
    for (var league in leaguesData) {
        var select = document.getElementById(league);
        if (select) {
            leaguesData[league].forEach(function(team) {
                var option = document.createElement('option');
                option.value = team;
                option.textContent = team;
                select.appendChild(option);
            });
        }
    }
}

// 为表单元素添加聚焦高亮效果
function addFocusHighlight() {
    var inputs = document.querySelectorAll('input, select');
    inputs.forEach(function(input) {
        input.addEventListener('focus', function() {
            input.classList.add('highlight');
        });
        input.addEventListener('blur', function() {
            input.classList.remove('highlight');
        });
    });
}

// 简单的提交提示
document.getElementById('settingsForm').addEventListener('submit', function(e) {
    alert("设置已提交！");
    // 实际情况中，您可以在此执行AJAX提交或其他逻辑
});

// 简单的逻辑：当省份变化时，更改城市选项(这里写死一些数据供演示)
var cityMapping = {
    "北京": ["北京市"],
    "上海": ["上海市"],
    "广东": ["广州市", "深圳市", "佛山市"]
};

document.getElementById('provinceSelect').addEventListener('change', function() {
    var selectedProvince = this.value;
    var citySelect = document.getElementById('citySelect');
    citySelect.innerHTML = "";
    if (selectedProvince === "保密") {
        var opt = document.createElement('option');
        opt.value = "保密";
        opt.textContent = "保密";
        citySelect.appendChild(opt);
    } else {
        cityMapping[selectedProvince].forEach(function(city) {
            var opt = document.createElement('option');
            opt.value = city;
            opt.textContent = city;
            citySelect.appendChild(opt);
        });
    }
});

// 页面加载完毕后执行
document.addEventListener('DOMContentLoaded', function() {
    populateTeams();
    addFocusHighlight();
});
</script>
</body>
</html>
